<template>
  <div class="Tables">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id_card"
        label="身份证号"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.id_card">
            {{
              scope.row.id_card.substr(0, 6) +
              '*****' +
              scope.row.id_card.substr(8)
            }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="tel" label="手机号" width="180" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.tel">
            {{ scope.row.tel.substr(0, 3) + '****' + scope.row.tel.substr(7) }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="apply_type"
        label="申领类型"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.apply_type.title">
            {{ scope.row.apply_type.title }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="team_id" label="关联机构" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.team_id.title">
            {{ scope.row.team_id.title }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="enroll_point_id"
        label="服务网点"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.enroll_point_id">
            {{ scope.row.enroll_point_id.title }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="channel" label="招生渠道" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.channel.title">
            {{ scope.row.channel.title }}
          </span>
          <span v-else></span>
        </template>
      </el-table-column>

      <el-table-column
        prop="write_time"
        label="录入时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop=""
        label="操作"
        align="center"
        width="200"

      >
        <template slot-scope="scope">
          <span class="edittext" v-if="checkPermission(['intentionEnroll'])" @click="applyform(scope.row.id)">报名</span>
          <span class="edittext" v-if="checkPermission(['intentionEdit'])" @click="editform(scope.row.id)">编辑</span>
          <span class="edittext" v-if="checkPermission(['intentionDelete'])" @click="deleteitem(scope.row.id)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          background
          :page-size="100"
          layout="total, sizes, prev, pager, next"
          :total="pages.total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//按钮权限验证
import checkPermission from '@/utils/permission'
export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //页码数据
      pages: {},
    }
  },
  props: {
    //表格数据
    tabData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  mounted() {
    this.tableData = this.tabData.list
    this.pages = this.tabData.page
  },
  components: {},
  watch: {
    tabData(val) {
      this.tableData = val.list
      this.pages = val.page
    },
  },
  methods: {
    //按钮权限验证
    checkPermission,
    //报名弹窗
    applyform(id) {
      let params = {
        id,
      }
      this.$emit('applyopen', params)
    },
    //关闭费用弹窗
    closeprcie() {
      this.isshowPrcie = false
    },
    //翻页总数
    handleSizeChange(val) {
      this.$emit('changepageTotal', val)
    },
    //翻页
    handleCurrentChange(val) {
      this.$emit('changepage', val)
    },
    //编辑
    editform(id) {
      let params = {
        id,
        type: 1,
      }
      //显示dialog通知父组件打开弹窗
      this.$emit('openedit', params)
    },
    //删除
    deleteitem(id) {
      this.$emit('deleteitem', id)
    },
  },
}
</script>

<style scoped lang='scss'>
.Tables {
  margin-top: 25px;
}
.edittext {
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
}
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
